<!-- 编辑题目 -->
<template>
  <div class="new-question-container">
    <div class="form-action">
      <el-form ref="newQuestionForm" :inline="true" label-position="right" label-width="120px" class="new-question-form">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('paperQuestionLangList.questionType')">
              <el-select v-model="questionTypeValue" :placeholder="$t('paperQuestionLangList.tagsTooltip')" @change="questionTypeChange" disabled>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <singleCom v-if="questionTypeValue === 'single'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <multipleCom v-if="questionTypeValue === 'multiple'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <judgeCom v-if="questionTypeValue === 'judge'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <combinationCom v-if="questionTypeValue === 'combination'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <blankCom v-if="questionTypeValue === 'blank'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <sortingCom v-if="questionTypeValue === 'sorting'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <clozeCom v-if="questionTypeValue === 'cloze'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <readingCom v-if="questionTypeValue === 'reading'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
        <listeningCom v-if="questionTypeValue === 'listening'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" @saveCallback="saveCallbackFunction" :new-edit-type="newType"/>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { cates } from '@/utils/dic'
  import singleCom from './question/single'
  import multipleCom from './question/multiple'
  import judgeCom from './question/judge'
  import combinationCom from './question/combination'
  import blankCom from './question/blank'
  import sortingCom from './question/sorting'
  import clozeCom from './question/cloze'
  import readingCom from './question/reading'
  import listeningCom from './question/listening'
  import fileAudio from '@/assets/svg/file-audio.svg'
  import fileAudioHover from '@/assets/svg/file-audio_hover.svg'
  export default {
    name: 'PaperNewQuestion',
    components: {
      singleCom,
      multipleCom,
      judgeCom,
      combinationCom,
      blankCom,
      sortingCom,
      clozeCom,
      readingCom,
      listeningCom
    },
    props: {
      paperId: String,
      newType: String
    },
    data() {
      return {
        questionTypeValue: '',
        typeOptions: [],
        customToolbar: ['bold', 'italic', 'underline', 'image'],
        fileAudio,
        fileAudioHover
      }
    },
    created() {
      this.typeOptions = cates
      this.questionTypeValue = cates[0].value
    },
    methods: {
      // 保存回调
      saveCallbackFunction() {
        this.$emit('callbackFuntion')
      },
      // 题型类型选择事件
      questionTypeChange(val) {
        this.questionTypeValue = val
      },
      initPage(row) {
        this.questionTypeValue = row.category
        this.$nextTick(() => {
          this.$refs.questionRef.initUpdateData(row)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .new-question-form {
    min-height: 720px;
    max-height: 720px;
    overflow-y: auto;
    position: relative;
  /deep/ .form-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  /deep/ .question-tip {
    width: 640px;
    color: #666666;
  }
  /deep/ .refer-answer {
    font-weight: bold;
    font-size: 16px;
    color: #409eff;
  }
  }
  /deep/ .quillWrapper {
    width: 640px;
    position: relative;
  }
</style>
